<template>
  <div class="sysBox">
    <div class="boxNav">
      <ul>
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="fn(index)"
          :class="[num1 == index ? 'active' : '']"
        >
          {{ item }}
        </li>
      </ul>
    </div>

    <div class="boxStairs">
      <el-scrollbar height="607px">
        <div class="boxSb" style="height: 110px">
          <span class="boxSb-t">登录:</span>
          <div class="boxSb-b">
            <p style="margin-top: 5px">
              <label for="dl"
                ><input type="checkbox" />&nbsp;&nbsp;开机时启动管理系统</label
              >
            </p>
            <p>
              <label for="dl1"
                ><input
                  type="checkbox"
                  checked
                  id="dl1"
                />&nbsp;&nbsp;启动管理系统时为我自动登录</label
              >
            </p>
            <p>
              <label for="dl2"
                ><input
                  type="checkbox"
                  checked
                  id="dl2"
                />&nbsp;&nbsp;总是打开登录提示</label
              >
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 310px">
          <span class="boxSb-t">主面板:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="zm">
                <input
                  type="checkbox"
                  id="zm"
                />&nbsp;&nbsp;始终保持在其他窗口前端</label
              >
            </p>
            <p>
              <label for="zm1">
                <input
                  type="checkbox"
                  checked
                  id="zm1"
                />&nbsp;&nbsp;最小化时自动隐藏至任务通知栏</label
              >
            </p>
            <p>
              <label for="zm2"
                ><input
                  type="checkbox"
                  checked
                  id="zm2"
                />&nbsp;&nbsp;在任务栏通知区显示管理系统图标</label
              >
            </p>
            <p>
              <label for="zm3">
                <input
                  type="checkbox"
                  checked
                  id="zm3"
                />&nbsp;&nbsp;显示天气</label
              >
            </p>
            <p>
              <label for="">关闭主面板时：</label>
            </p>
            <p>
              <label for="zm4"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="gb"
                  checked
                  id="zm4"
                />&nbsp;&nbsp;隐藏到任务栏通知区域，不退出程序</label
              >
            </p>
            <p>
              <label for="zm5"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="gb"
                  id="zm5"
                />&nbsp;&nbsp;退出程序</label
              >
            </p>
            <p>
              <label for=""
                >你可以自由定制适合你的面板和功能，使用更有效率。</label
              >
            </p>
            <p>
              <el-button>界面管理器</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 230px">
          <span class="boxSb-t">状态 :</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="">登录后状态为：</label>
              <select>
                <option value="wzxs">&nbsp;我在线上&nbsp;</option>
                <option value="lk">&nbsp;离开&nbsp;</option>
              </select>
            </p>
            <p>
              <label for="zt"
                ><input
                  type="checkbox"
                  checked
                  id="zt"
                />&nbsp;&nbsp;运行全屏程序时切换至“忙碌”状态</label
              >
            </p>
            <p>
              <label for=""
                ><input
                  type="checkbox"
                  checked
                />&nbsp;&nbsp;鼠标键盘无动作&nbsp;&nbsp;
                <el-input-number
                  v-model="num"
                  class="mx-4"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  @change="handleChange"
                  size="small"
                />
                &nbsp;&nbsp;分钟后</label
              >
            </p>
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 250px">
          <span class="boxSb-t">会话窗口:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="">登录后状态为：</label>
              <select>
                <option value="wzxs">&nbsp;我在线上&nbsp;</option>
                <option value="lk">&nbsp;离开&nbsp;</option>
              </select>
            </p>
            <p>
              <label for="zt"
                ><input
                  type="checkbox"
                  checked
                  id="zt"
                />&nbsp;&nbsp;运行全屏程序时切换至“忙碌”状态</label
              >
            </p>
            <p>
              <label for=""
                ><input
                  type="checkbox"
                  checked
                />&nbsp;&nbsp;鼠标键盘无动作&nbsp;&nbsp;
                <el-input-number
                  v-model="num"
                  class="mx-4"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  @change="handleChange"
                  size="small"
                />
                &nbsp;&nbsp;分钟后</label
              >
            </p>
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 230px">
          <span class="boxSb-t">信息展示:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="">登录后状态为：</label>
              <select>
                <option value="wzxs">&nbsp;我在线上&nbsp;</option>
                <option value="lk">&nbsp;离开&nbsp;</option>
              </select>
            </p>
            <p>
              <label for="zt"
                ><input
                  type="checkbox"
                  checked
                  id="zt"
                />&nbsp;&nbsp;运行全屏程序时切换至“忙碌”状态</label
              >
            </p>
            <p>
              <label for=""
                ><input
                  type="checkbox"
                  checked
                />&nbsp;&nbsp;鼠标键盘无动作&nbsp;&nbsp;
                <el-input-number
                  v-model="num"
                  class="mx-4"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  @change="handleChange"
                  size="small"
                />
                &nbsp;&nbsp;分钟后</label
              >
            </p>
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 260px">
          <span class="boxSb-t">提醒:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="">登录后状态为：</label>
              <select>
                <option value="wzxs">&nbsp;我在线上&nbsp;</option>
                <option value="lk">&nbsp;离开&nbsp;</option>
              </select>
            </p>
            <p>
              <label for="zt"
                ><input
                  type="checkbox"
                  checked
                  id="zt"
                />&nbsp;&nbsp;运行全屏程序时切换至“忙碌”状态</label
              >
            </p>
            <p>
              <label for=""
                ><input
                  type="checkbox"
                  checked
                />&nbsp;&nbsp;鼠标键盘无动作&nbsp;&nbsp;
                <el-input-number
                  v-model="num"
                  class="mx-4"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  @change="handleChange"
                  size="small"
                />
                &nbsp;&nbsp;分钟后</label
              >
            </p>
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 170px">
          <span class="boxSb-t">热键:</span>
          <div class="boxSb-b">
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 250px">
          <span class="boxSb-t">显示:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="">登录后状态为：</label>
              <select>
                <option value="wzxs">&nbsp;我在线上&nbsp;</option>
                <option value="lk">&nbsp;离开&nbsp;</option>
              </select>
            </p>
            <p>
              <label for="zt"
                ><input
                  type="checkbox"
                  checked
                  id="zt"
                />&nbsp;&nbsp;运行全屏程序时切换至“忙碌”状态</label
              >
            </p>
            <p>
              <label for=""
                ><input
                  type="checkbox"
                  checked
                />&nbsp;&nbsp;鼠标键盘无动作&nbsp;&nbsp;
                <el-input-number
                  v-model="num"
                  class="mx-4"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  @change="handleChange"
                  size="small"
                />
                &nbsp;&nbsp;分钟后</label
              >
            </p>
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 150px">
          <span class="boxSb-t">声音:</span>
          <div class="boxSb-b">
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 179px">
          <span class="boxSb-t">软件更新:</span>
          <div class="boxSb-b">
            <p style="margin-top: 8px">
              <label for="">登录后状态为：</label>
              <select>
                <option value="wzxs">&nbsp;我在线上&nbsp;</option>
                <option value="lk">&nbsp;离开&nbsp;</option>
              </select>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 160px">
          <span class="boxSb-t">文件管理:</span>
          <div class="boxSb-b">
            <p>
              <label for="zt2"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  checked
                  id="zt2"
                />&nbsp;&nbsp;将状态切换至&nbsp;&nbsp;
                <select>
                  <option value="lk">&nbsp;离开&nbsp;</option>
                  <option value="zs">&nbsp;在线&nbsp;</option>
                </select>
              </label>
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
        <div class="boxSb" style="height: 180px">
          <span class="boxSb-t">文件共享:</span>
          <div class="boxSb-b">
            <p>
              <label for="zt"
                ><input
                  type="checkbox"
                  id="zt"
                />&nbsp;&nbsp;运行全屏程序时切换至“忙碌”状态</label
              >
            </p>
            <p>
              <label for=""
                ><input type="checkbox" />&nbsp;&nbsp;鼠标键盘无动作&nbsp;&nbsp;
                <el-input-number
                  v-model="num"
                  class="mx-4"
                  :min="1"
                  :max="10"
                  controls-position="right"
                  @change="handleChange"
                  size="small"
                />
                &nbsp;&nbsp;分钟后</label
              >
            </p>
            <p>
              <label for="zt3"
                >&nbsp;&nbsp;&nbsp;&nbsp;<input
                  type="radio"
                  name="zt"
                  id="zt3"
                />&nbsp;&nbsp;自动锁定管理系统</label
              >
            </p>
            <p>
              <label for="zt4"
                ><input
                  type="checkbox"
                  checked
                  id="zt4"
                />&nbsp;&nbsp;离开、忙碌、请忽打扰时自动回复（100字以内）</label
              >
            </p>
            <p>
              &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <el-button size="small">自动回复设置</el-button>
              <el-button size="small">快捷回复设置</el-button>
            </p>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import { ElButton, ElInputNumber, ElScrollbar } from "element-plus";
export default {
  data() {
    return {
      arr: [
        "登录",
        "主页面",
        "状态",
        "会话窗口",
        "信息展示",
        "提醒",
        "热键",
        "显示",
        "声音",
        "软件更新",
        "文件管理",
        "文件共享",
      ],
      num1: localStorage.getItem("index1") || 0,
      num: 0,
    };
  },

  components: {
    ElButton,
    ElInputNumber,
    ElScrollbar,
  },

  computed: {},

  mounted() {},

  methods: {
    fn(a) {
      this.num1 = a;
      localStorage.setItem("index1", a);
    },
  },
};
</script>

<style lang="less" scoped>
.sysBox {
  width: 100%;
  height: 700px;
  background-color: #fff;
  position: relative;
  display: flex;
  .boxNav {
    position: absolute;
    top: 0;
    left: -20px;
    li {
      width: 200px;
      height: 51px;
      font-size: 14px;
      font-weight: 600;
      text-align: left;
      text-indent: 25px;
      line-height: 51px;
      color: #000;
      background-color: #f5f5f5;
    }
    .active {
      background-color: #fff;
    }
  }
  .boxStairs {
    width: 960px;
    margin-left: 180px;
    height: 620px;
    .boxSb {
      display: flex;
      width: 960px;
      .boxSb-t {
        width: 150px;
        height: 55px;
        line-height: 55px;
        font-size: 12px;
        display: inline-block;
        text-indent: 50px;
      }
      .boxSb-b {
        flex: 1;
        p {
          height: 30px;
          width: 500px;
          line-height: 30px;
          font-size: 12px;
          label {
            vertical-align: middle;
            input {
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
